<template>
  <view class="qaBox">
    <view class="qaTopInfo">
      <view class="qaTopInfoBox">
        <image :src="qudata.images"></image>
        <view class="qaInfoText">
          <h3 class="line1">{{ qudata.productName }}</h3>
          <!-- <span>共{{ qudata.questionNumber }}个问题</span> -->
        </view>
      </view>
    </view>
    <view class="questionCent box-border">
      <view class="uni-textarea relative">
        <textarea
          v-model="questionText"
          placeholder="请说出你的问题..."
          auto-height
        />
        <view class="head_img absolute">
          <image
            :src="headImg"
            style="
              width: 88rpx;
              height: 88rpx;
              border-radius: 50%;
              left: 30rpx;
              top: 20rpx;
            "
          />
          <image
            :src="`${VUE_APP_STATIC_URL}ui-static/zwx-static/goods-detail/head_img_wen.png`"
            style="
              width: 44rpx;
              height: 44rpx;
              position: absolute;
              right: 0;
              bottom: 0;
            "
          />
        </view>
      </view>
    </view>
    <view class="putQuestionsBox" @click="addProblem">
      <span class="putQuestionsBtn">发布</span>
    </view>
    <!-- <submit-button-new position="bottom" text="发布提问" @submitEvent="addProblem"></submit-button-new> -->
    <!-- <view class="submit_button" @click="addProblem">发布提问</view> -->
  </view>
</template>

<script setup>
import { request } from "@/utils/request";
import { inject, ref, computed } from "vue";
import { useStore } from "vuex";
import { onLoad } from "@dcloudio/uni-app";
import API from "@/config/api";
const anonymous = ref(false);
const qudata = ref({});
const questionText = ref("");
const ifAnonymous = ref(0);
import { btnUseLoading } from "../../hooks/bntUseLoading";

const store = useStore();

const { btnShowLoading } = btnUseLoading();
const $getJumpParam = inject("$getJumpParam");

const headImg = ref("");

onLoad((params) => {
  qudata.value = $getJumpParam(params);
  // console.log("qudata.value=", qudata.value);

  // 获取头像
  const storage_userInfo = uni.getStorageSync("storage_userInfo");
  headImg.value = storage_userInfo.headImage;
});

function seeAllFn() {
  uni.navigateTo({
    url: "qADetail",
  });
}
function changeCheck() {
  this.anonymous = !this.anonymous;
}
function addProblem() {
  if (questionText.value === "") {
    uni.showToast({
      title: "内容不能为空！",
      icon: "none",
    });
    return false;
  }
  // uni.showLoading({
  //   title: '提交中...',
  //   mask: true
  // });
  if (anonymous.value === true) {
    ifAnonymous.value = 1;
  } else {
    ifAnonymous.value = 0;
  }
  btnShowLoading();
  request(
    API.addProblem,
    {
      productId: qudata.value.productId,
      problem: questionText.value,
      ifAnonymous: ifAnonymous.value,
    },
    "POST"
  )
    .then((res) => {
      uni.hideLoading();
      uni.showToast({
        title: "提问成功",
        icon: "success",
      });
      uni.navigateTo({
        url: `/zwx_category_page2/userModule/questionList`,
      });
    })
    .catch((res) => {
      uni.showToast({
        title: "失败",
        icon: "none",
      });
    });
}
</script>

<style lang="scss" scoped>
.qaBox {
  .cart-select-img {
    width: 50upx;
    height: 50upx;
    margin: 30upx;
    box-sizing: border-box;
  }
  .qaTopInfo {
    width: 100%;
    height: 120rpx;
    background: #f2f6f9;
    .qaTopInfoBox {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 120rpx;
      padding-left: 30rpx;
      padding-right: 30rpx;
      image {
        width: 80rpx;
        height: 80rpx;
        margin-right: 20rpx;
      }
      .qaInfoText {
        flex: 1;
        overflow: hidden;
        h3 {
          font-size: 30upx;
          font-weight: 500;
          color: #333333;
          line-height: 120rpx;
        }
        span {
          font-size: 24upx;
          color: #cccccc;
          margin-top: 20rpx;
        }
      }
    }
  }
  .questionCent {
    width: 100%;
    padding: 30rpx;
    textarea {
      padding: 30upx;
      box-sizing: border-box;
      min-height: 500upx;
      background: #ffffff;
      border: 2upx solid #777;
      width: 100%;
      color: #666666;
      text-indent: 4em;
      line-height: 2.5;
    }
    .textarea-placeholder {
      font-size: 26upx;
      color: #999999;
    }
    .anonymous {
      label {
        font-size: 26upx;
        color: #333333;
      }
    }
    .head_img {
      left: 0;
      top: 0;
    }
  }
  .putQuestionsBox {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background: #ffffff;
    padding: 0 24rpx;
    .putQuestionsBtn {
      width: 100%;
      height: 72rpx;
      line-height: 72rpx;
      text-align: center;
      background: #ff5000;
      display: block;
      margin: 0 auto 70rpx auto;
      color: #fff;
      font-size: 28rpx;
    }
  }
}
</style>
